<template>
  <div class="d-s-s pb50 diy-tabbar">
    <!--分类不同样式展示-->
    <div class="flex-1 mr30 pt30">
      <div class="model-container d-c d-e-c">
        <div class="img-box p10 ww100" :style="'backgroundColor:' + formData.backgroundColor + ';'">
          <div class="d-a-c">
            <div v-for="(item, index) in formData.list" :key="index" class="d-c d-c-c" @mouseenter="mouseenter"
              @mouseleave="mouseleave">
              <div v-if="formData.type != 2">
                <img class="nav_img" v-img-url="index == 0 ? item.selectedIconPath : item.iconPath" alt="" />
              </div>
              <div v-if="formData.type != 1" :style="index == 0
                ? 'color:' + formData.textHoverColor + ';'
                : 'color:' + formData.textColor + ';'
                ">
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--图片展示参数-->
    <div class="param-container">
      <div class="form-title">底部导航</div>
      <el-form size="small" :model="formData" label-width="130px">
        <div class="f16 gray3 form-subtitle">样式设置</div>
        <div class="form-item">
          <div class="form-label">是否开启自定义：</div>
          <div class="flex-1">
            <el-radio-group v-model="formData.isAuto">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">导航类型：</div>
          <div class="flex-1">
            <el-radio-group v-model="formData.type">
              <el-radio :label="0">图文</el-radio>
              <el-radio :label="1">图片</el-radio>
              <el-radio :label="2">文字</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">背景颜色：</div>
          <div class="flex-1 d-s-c" style="height: 36px">
            <el-color-picker size="default" v-model="formData.backgroundColor"></el-color-picker>
            <el-input class="ml10" v-model="formData.backgroundColor" />
            <el-button style="margin-left: 10px" @click.stop="
              onEditorResetColor(formData, 'backgroundColor', '#ffffff')
              " type="primary" link>重置</el-button>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">文字颜色：</div>
          <div class="flex-1 d-s-c" style="height: 36px">
            <el-color-picker size="default" v-model="formData.textColor"></el-color-picker>
            <el-input class="ml10" v-model="formData.textColor" />
            <el-button style="margin-left: 10px" @click.stop="onEditorResetColor(formData, 'textColor', '#333333')"
              type="primary" link>重置</el-button>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">选中颜色：</div>
          <div class="flex-1 d-s-c" style="height: 36px">
            <el-color-picker size="default" v-model="formData.textHoverColor"></el-color-picker>
            <el-input class="ml10" v-model="formData.textHoverColor" />
            <el-button style="margin-left: 10px" @click.stop="
              onEditorResetColor(formData, 'textHoverColor', '#E2231A')
              " type="primary" link>重置</el-button>
          </div>
        </div>
        <div class="form-chink"></div>
        <div class="f16 gray3 form-subtitle">
          内容设置
          <span class="gray9 f12">图片建议宽度88*88px；鼠标拖拽左侧圆点可调整导航顺序</span>
        </div>
        <template v-if="formData.list && formData.list.length > 0">
          <draggable v-model="formData.list" group="people" item-key="index" class="draggable-list">
            <template #item="{ element, index }">
              <div class="d-b-c param-img-item">
                <div class="d-c d-c-c mr10" style="width: 50px">
                  <el-icon style="height: 6px" color="#999" size="12px" v-for="item in 6" :key="item">
                    <MoreFilled />
                  </el-icon>
                </div>
                <div class="right">
                  <el-icon class="el-icon-DeleteFilled" @click="onEditorDeleleData(index)">
                    <CloseBold />
                  </el-icon>
                  <el-form-item label="显示隐藏：" v-if="element.text == '店铺'">
                    <el-radio-group v-model="element.isShow">
                      <el-radio :label="false">隐藏</el-radio>
                      <el-radio :label="true">显示</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <div class="d-s-c mb16 ww100">
                    <div class="url-box d-s-c">
                      <span class="key-name">图标</span>
                    </div>
                    <div class="d-a-c flex-1">
                      <div class="icon">
                        <div class="icon-text">未选中</div>
                        <img v-img-url="element.iconPath" alt="" @click="onEditorSelectImage(element, 'iconPath')" />
                      </div>
                      <div class="icon">
                        <div class="icon-text">已选中</div>
                        <img v-img-url="element.selectedIconPath" alt="" @click="
                          onEditorSelectImage(element, 'selectedIconPath')
                          " />
                      </div>
                    </div>
                  </div>
                  <div class="url-box mb16 flex-1 d-s-c ww100">
                    <span class="key-name">名称</span>
                    <el-input maxlength="6" show-word-limit v-model="element.text"></el-input>
                  </div>
                  <div class="d-s-c ww100">
                    <div class="url-box flex-1 d-s-c">
                      <span class="key-name">链接</span>
                      <el-input :suffix-icon="ArrowRight" @click="changeLink(index)" v-model="element.linkUrl">
                        <template #suffix>
                          <el-icon color="#333" size="16px">
                            <ArrowRight />
                          </el-icon>
                        </template>
                      </el-input>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </draggable>
        </template>
        <div class="d-c-c pb16" v-if="formData.list.length < 5">
          <el-button plain type="primary" @click="onEditorAddData">+添加图文导航{{ formData.list.length }}/5</el-button>
        </div>
      </el-form>
    </div>
    <!--提交-->
    <div class="common-button-wrapper">
      <el-button size="small" type="primary" @click="Submit()">保存</el-button>
    </div>
    <!--上传图片-->
    <Upload v-if="isupload" :isupload="isupload" :config="{ total: 3 }" :selectedIndex="selectedIndex"
      @returnImgs="returnImgsFunc"></Upload>
    <Setlink v-if="is_linkset" :is_linkset="is_linkset" @closeDialog="closeLinkset">选择链接</Setlink>
  </div>
</template>

<script>
import PageApi from "@/api/page.js";
import Upload from "@/components/file/Upload.vue";
import Setlink from "@/components/setlink/SetTab.vue";
import draggable from "vuedraggable";
export default {
  data() {
    return {
      /*是否上传图片*/
      isupload: false,
      selectedIndex: "",
      /*表单数据对象*/
      formData: {
        /* 导航类型*/
        type: "0",
        isAuto: "0",
        /* 背景颜色*/
        backgroundColor: "#ffffff",
        textColor: "#333333",
        textHoverColor: "red",
        /* 悬浮 */
        bulge: false,
        list: [
          // {
          // text:'',
          // iconPath:'',
          // isShow:true,
          // selectedIconPath:'',
          // link:{
          // wap_url:''
          // }
          // }
        ],
      },
      is_linkset: false,
      index: 0,
    };
  },
  components: {
    Upload,
    Setlink,
    draggable,
  },
  created() {
    this.getData();
  },
  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      PageApi.getTabbar({}, true)
        .then((res) => {
          // let data = JSON.parse(res.data.data.data);
          // console.log(data)
          self.formData = res.data;
          self.selectedIndex = res.data.backgroundColor;
          console.log(self.formData.list);
        })
        .catch((error) => {
          self.loading = false;
        });
    },

    /*提交*/
    Submit() {
      let self = this;
      self.loading = true;
      let Params = self.formData;
      if (Params.list.length <= 0 || !Params.list) {
        Params = {};
      }
      PageApi.editTabbar(Params, true)
        .then((data) => {
          self.loading = false;
          ElMessage({
            message: "恭喜你，修改成功",
            type: "success",
          });
          self.getData();
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*选择链接*/
    changeLink(index) {
      this.is_linkset = true;
      this.index = index;
    },

    /*获取链接并关闭弹窗*/
    closeLinkset(e) {
      this.is_linkset = false;
      this.formData.list[this.index].linkUrl = "/" + e.url;
      this.formData.list[this.index].text = e.name;
    },
    onEditorDeleleData: function (index) {
      let self = this;
      if (self.formData.list.length <= 1) {
        ElMessage({
          message: "至少保留一个",
          type: "error",
        });
        return false;
      }
      self.formData.list.splice(index, 1);
    },
    onEditorSelectImage: function (index, imgUrl) {
      this.isupload = true;
      this.imgModel = {
        index: index,
        imgUrl: imgUrl,
      };
    },
    /*上传图片*/
    returnImgsFunc(e) {
      if (e != null) {
        this.imgModel.index[this.imgModel.imgUrl] = e[0]["filePath"];
      }
      this.isupload = false;
    },
    onEditorResetColor: function (holder, attribute, color) {
      holder[attribute] = color;
    },
    onEditorAddData: function () {
      let self = this;
      // 新增data数据
      if (self.formData.list) {
        if (self.formData.list.length >= 5) {
          ElMessage({
            message: "最多添加5个",
            type: "error",
          });
          return false;
        } else {
          let newDataItem = {
            iconPath: "",
            text: "",
            isShow: true,
            selectedIconPath: "",
            link: {
              wap_url: "",
            },
          };
          self.formData.list.push(newDataItem);
        }
      } else {
        let newDataItem = {
          iconPath: "",
          text: "",
          isShow: true,
          selectedIconPath: "",
          link: {
            wap_url: "",
          },
        };
        let list = [
          {
            ...newDataItem,
          },
        ];
        self.formData = {
          type: 0,
          backgroundColor: "",
          textColor: "",
          textHoverColor: "",
          bulge: false,
          list: [],
        };
        self.formData.list = list;
      }
    },
    mouseenter(e) {
      e.target.childNodes[2].style.color = this.formData.textHoverColor;
    },
    mouseleave(e) {
      e.target.childNodes[2].style.color = this.formData.textColor;
    },
  },
};
</script>

<style scoped="scoped">
.diy-tabbar {
  margin: 0;
  padding: 0;
  background: none;
}

.model-container {
  width: 375px;
  height: calc(100vh - 150px);
  margin: 0 auto;
  background-color: #fff;
}

.mr30 {
  margin-right: 30px;
}

.model-container img {
  width: 100%;
}

.model-container .img-box {
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
}

.param-container {
  width: 476px;
  max-height: calc(100vh - 98px);
  overflow-y: auto;
  background: #fff;
  /* border: 1px solid #cccccc; */
}

.param-container .el-form-item {
  font-size: 14px !important;
}

.form-title {
  padding: 0 22px;
  height: 62px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  color: #666;
  font-weight: bold;
}

.form-subtitle {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 20px;
}

.form-chink {
  width: 438px;
  height: 6px;
  background: #eeeeee;
  border-radius: 3px;
  margin: 0 auto;
  margin-top: 10px;
}

.icon {
  position: relative;
}

.icon img {
  width: 88px;
  height: 88px;
}

.icon .icon-text {
  width: 88px;
  height: 28px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.45);
}

.nav_img {
  width: 30px !important;
  height: 30px;
}

.delete-box {
  z-index: 99;
  display: flex;
  justify-content: flex-end;
}

.param-img-item {
  position: relative;
  border: 1px solid #eee;
  margin-left: 20px;
  margin-top: 23px;
  padding: 0 22px 0 6px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}

.param-img-item .right {
  padding: 6px 0 26px 0;
  flex: 1;
}

.param-img-item .el-icon-DeleteFilled {
  font-size: 26px;
  position: absolute;
  right: -6px;
  top: -6px;
  background-color: #666;
  color: #fff;
  border-radius: 50%;
  padding: 4px;
}

.key-name {
  font-size: 16px;
  color: #666;
  white-space: nowrap;
  margin-right: 30px;
}

.form-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  padding: 10px;
}

.form-label {
  width: 122px;
  text-align: right;
}

.el-color-picker--small .el-color-picker__trigger {
  width: 36px;
  height: 36px;
}

.f12 {
  font-size: 14px;
}

.draggable-list {
  padding-bottom: 20px;
  padding-right: 18px;
}
</style>
